<template>
  <div class="container">夏宇航
    <el-card>
      <el-row type="flex" justify="space-between" :gutter="20">
        <el-col :span="18">
          <el-form size="small" :model="queryinfo" ref="articlesFormRef" label-width="90px">
            <el-form-item label="关键字" prop="keyword">
              <el-input clearable @clear="inputClear" v-model.trim="queryinfo.keyword" placeholder="根据文章标题内容搜索">
              </el-input>
            </el-form-item>
            <el-form-item label="状态" style="width: 310px" prop="state">
              <el-select v-model="queryinfo.state" placeholder="请选择">
                <el-option v-for="item in tateOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item style="margin-left: -80px">
              <el-button size="small" @click="clear">清除</el-button>
              <el-button size="small" type="primary" @click="search">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-row type="flex" justify="end">
            <el-button icon="el-icon-edit" type="success" size="small" @click="addArticles">新增文章
            </el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-alert :title="'数据一共' + this.total + '条'" type="info" show-icon></el-alert>
      <!-- 列表区域 -->
      <el-table :data="articlesList" style="font-size: 14px" size="small">
        <el-table-column style="width: 80px" type="index" label="序号"></el-table-column>
        <el-table-column style="width: 400px" label="文章标题" prop="title">
          <template v-slot="{ row }">
            {{ row.title }}
            <el-button v-if="row.videoURL !== ''" @click="showVideo(row)" type="text" icon="el-icon-film"></el-button>
          </template>
        </el-table-column>
        <el-table-column style="width: 300px" label="阅读数" prop="visits"></el-table-column>
        <el-table-column style="width: 300px" label="录入人" prop="username"></el-table-column>
        <el-table-column style="width: 300px" label="录入时间" prop="createTime">
          <template v-slot="{ row }">
            {{ row.createTime | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column style="width: 100px" label="状态" prop="state">
          <template v-slot="{ row }">
            <span v-if="row.state === 0">已禁用</span>
            <span v-else>已启用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" style="width: 100px">
          <template v-slot="{ row }">
            <el-button type="text" @click="showArticle(row)" style="color: #409eff" size="small">预览</el-button>
            <el-button type="text" style="color: #409eff" size="small" v-if="row.state === 0" @click="handletager(row)">
              启用
            </el-button>
            <el-button type="text" size="small" v-else @click="handletager(row)">禁用</el-button>
            <el-button @click="editArticles(row)" :disabled="row.state === 1 ? true : false" type="text" size="small"
              ref="edit">修改
            </el-button>
            <el-button @click="handleDelete(row)" :disabled="row.state === 1 ? true : false" type="text" size="small"
              ref="delete">
              删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryinfo.page" :page-sizes="[10, 20, 30, 50]" :page-size="queryinfo.pagesize"
        layout=" prev, pager, next, sizes, jumper" :total="total">
      </el-pagination>
    </el-card>

    <Add :titleInfo="titleInfo" :formBase="formBase" ref="addRef"></Add>
    <Preview ref="previewRef" :previewData="previewData"></Preview>
    <meta name="referrer" content="no-referrer" />
    <div class="videobox" v-if="showDialog">
      <div class="close">
        <el-button type="text" size="default" icon="el-icon-close" @click="close"></el-button>
      </div>
      <div class="box">
        <video :autoplay="isAutoplay" :src="videoURL" width="100%" height="100%" muted></video>
      </div>
    </div>
  </div>
</template>

<script>
import { list, changeState, remove } from '../../api/hmmm/articles'
import Add from '../components/articles-add'
import Preview from '../components/articles-preview.vue'
export default {
  data () {
    return {
      isAutoplay: 'autoplay',
      videoURL: '',
      showDialog: false,
      previewData: {},
      formBase: {},
      titleInfo: {
        text: '新增',
        pageTitle: '文章'
      },
      rowState: true,
      articlesList: [],
      queryinfo: {
        page: 1,
        pagesize: 10,
        keyword: null,
        state: null
      },
      total: 0,
      // 状态复选框
      tateOptions: [
        {
          value: '1',
          label: '启动'
        },
        {
          value: '0',
          label: '禁用'
        }
      ]
    }
  },
  created () {
    this.getArticlesList()
  },
  methods: {
    // 关闭视频
    close () {
      this.showDialog = false
      this.isAutoplay = 'unautoplay'
    },
    // 视频
    showVideo (row) {
      this.showDialog = true
      this.videoURL = row.videoURL
      // console.log(this.videoURL)
    },
    // 预览
    showArticle (row) {
      console.log(row)
      this.$refs.previewRef.handleShow()
      this.previewData = row
    },
    // 删除
    async handleDelete (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // console.log(row)
          const data = await remove(row)
          console.log(data)
          if (data.status !== 200) return this.$message.error('删除失败')
          this.getArticlesList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 修改
    editArticles (row) {
      this.$refs.addRef.handleShow()
      this.titleInfo.text = '修改'
      this.formBase = row
      console.log(this.formBase)
    },
    // 新增
    addArticles () {
      this.$refs.addRef.handleShow()
      this.formBase = {
        // 标题
        title: '',
        // 文章正文
        articleBody: '',
        // 视频地址
        videoURL: ''
      }
    },
    // 启用禁用切换-未完成
    async handletager (row) {
      console.log(row)
      const text = row.state === 0 ? '启用' : '禁用'
      this.$confirm(`此操作将${text}该文章, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          if (row.state === 1) {
            this.rowState = true
          } else {
            this.rowState = false
          }
          row.state = this.rowState === true ? 0 : 1
          const { data: res } = await changeState(row)
          console.log(res)
          if (!res.success) this.$message.error('状态编辑失败')
          this.$message.success('状态编辑成功')
          this.getArticlesList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 点击清空搜索框
    inputClear () {
      console.log(this.queryinfo.keyword)
      this.getArticlesList()
    },
    // 搜索
    search () {
      if (this.queryinfo.keyword === '') { return this.$message.error('请填写完整') }
      this.getArticlesList()
    },
    handleCurrentChange (page) {
      this.queryinfo.page = page
      this.getArticlesList()
    },
    handleSizeChange (size) {
      this.queryinfo.pagesize = size
      this.getArticlesList()
    },
    // 清除输入框
    clear () {
      this.$refs.articlesFormRef.resetFields()
    },
    // 获取列表数据
    async getArticlesList () {
      const { data: res } = await list(this.queryinfo)
      console.log(res)
      this.articlesList = res.items
      this.total = res.counts
    }
  },
  components: {
    Add,
    Preview
  }
}
</script>

<style scoped lang='less'>
.el-card {
  margin: 10px;
}
.el-alert {
  margin: 0 0 10px 0;
}
.el-form-item {
  width: 290px;
  float: left;
}

.el-pagination {
  padding: 15px 0 0;
  text-align: right;
}
.el-breadcrumb {
  padding-bottom: 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}
.videobox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
}
.close {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 30px;
  left: 50%;
  // -webkit-transform: translate(-50%);
  transform: translate(-50%);
  background: rgba(0, 0, 0, 0.4);
  // -webkit-box-shadow: 0 0 5px rgb(0 0 0 / 40%);
  box-shadow: 0 0 5px rgb(0 0 0 / 40%);
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 20px;
}
.box {
  width: 800px;
  height: 600px;
  position: absolute;
  left: 50%;
  top: 50%;
  // -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
